<template>
    <Teleport to="#before-navigation" v-if="targetExists">
        <CourseContacts />
    </Teleport>

    <div class="tools-box">
        <div>
            <el-icon size="25" color="#979797" v-if="roleStore.isSuperAdmin" @click="goPage('courseResourceEdit', { courseId: courseId })"><EditPen /></el-icon>
        </div>
        <div class="navigation-arrows">
            <el-icon size="25" color="#979797"><ArrowLeftBold /></el-icon>
            <el-icon size="25" color="#979797" @click="goPage('/console')"><HomeFilled /></el-icon>
            <el-icon size="25" color="#979797"><ArrowRightBold /></el-icon>
        </div>
    </div>
    <h2 class="section-tit">{{ locale === 'en' ? unitInfo?.title_en : unitInfo?.title_cn }}</h2>
    <div class="section-info rich-box" v-html="unitInfo?.description"></div>
    <div class="activity-list">
        <div class="list">
            <div class="activity-item" :class="`${resources.type}-type`" v-for="(resources, index) in unitInfo?.resources" :key="index">
                <div class="item-box" :class="disabledClass(resources, index)" @click="goResourcesPage(resources, disabledClass(resources, index) !== 'disabled')">
                    <div class="type-complete">
                        <div class="activity-type">{{ imgMap[resources.type].type }}</div>
                        <el-icon size="22" color="#53914d" v-if="resources.watching_info?.is_completed || parseFloat(resources.actual_score) >= parseFloat(resources.pass_score)">
                            <SuccessFilled />
                        </el-icon>
                    </div>
                    <h4 class="activity-tit">{{ resources.title }}</h4>
                    <img :src="imgMap[resources.type].img" :alt="imgMap[resources.type].type" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, type RouteLocationNormalized } from 'vue-router'
import { useRoleStore } from '@/stores/role'

import UnitService from '@/api/unit'
import type { UnitItem } from '@/types/unit'
import type { ResourceItem } from '@/types/resource'

import { useI18n } from 'vue-i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'

import CourseContacts from '@/components/CourseContacts.vue'

import { goPage } from '@/utils/global'

import VideoImg from '@/assets/img/video-1.svg'
import FolderImg from '@/assets/img/folder-1.svg'
import QuizImg from '@/assets/img/quiz-1.svg'
import AssignImg from '@/assets/img/assign-1.svg'
import FileImg from '@/assets/img/file-1.svg'

const route = useRoute() as RouteLocationNormalized
const roleStore = useRoleStore()
const courseId = computed(() => Number(route.params.courseId))
const unitId = computed(() => Number(route.params.unitId))
const loading = ref(false)
const { locale, t } = useI18n<{ message: MessageSchema }, SupportedLocales>()
const targetExists = ref(false)

const unitInfo = ref<UnitItem | null>()
function getUnitInfo() {
    loading.value = true
    UnitService.getById(unitId.value)
        .then(res => {
            unitInfo.value = res
        })
        .finally(() => {
            loading.value = false
        })
}
const goResourcesPage = (resources: ResourceItem, isCompleted: boolean) => {
    switch (resources.type) {
        case 'video':
            if (isCompleted) goPage(`/console/course/${courseId.value}/unit/${unitId.value}/videoTime/${resources.id}`)
            break
        case 'folder':
            goPage(`/console/course/${courseId.value}/unit/${unitId.value}/folder/${resources.id}`)
            break
        case 'quiz':
            if (isCompleted) goPage(`/console/course/${courseId.value}/unit/${unitId.value}/quiz/${resources.id}`)
            break
        case 'report':
            goPage(`/console/course/${courseId.value}/unit/${unitId.value}/assign/${resources.id}`)
            break

        default:
            window.location.href = resources.url
            break
    }
}
const imgMap: any = computed(() => ({
    video: {
        img: VideoImg,
        type: t('course.view.resource_type_1'),
    },
    folder: {
        img: FolderImg,
        type: t('course.view.resource_type_2'),
    },
    quiz: {
        img: QuizImg,
        type: t('course.view.resource_type_3'),
    },
    report: {
        img: AssignImg,
        type: t('course.view.resource_type_4'),
    },
    file: {
        img: FileImg,
        type: t('course.view.resource_type_5'),
    },
}))
const disabledClass = (resources: ResourceItem, index: number): string => {
    if (!unitInfo.value) return ''
    if (resources.type === 'video' && index !== 0 && !resources.watching_info?.is_completed && !unitInfo.value.resources[index - 1].watching_info?.is_completed) return 'disabled'
    if (resources.type === 'quiz') {
        // 前面所有的video都通过了, 才能进行考考你
        const ind = unitInfo.value.resources.filter(item => item.type === 'video').findIndex(item => item.watching_info?.is_completed === false)
        if (ind !== -1) return 'disabled'
    }
    return ''
}

watch(unitId, getUnitInfo)

onMounted(() => {
    targetExists.value = !!document.querySelector('#before-navigation')
    getUnitInfo()
})
</script>

<style lang="less" scoped>
.tools-box {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-icon {
        cursor: pointer;
        transition: color 0.35s ease-in-out;

        &:hover {
            color: #f06423;
        }
    }

    .navigation-arrows {
        display: flex;
        align-items: center;
        gap: 15px;
    }
}

.section-tit {
    margin-bottom: 50px;
    font-size: 30px;
    color: #666;
    line-height: 1.2;

    &::after {
        margin-top: 18px;
        content: '';
        display: block;
        height: 4px;
        background-color: rgba(0, 169, 206, 1);
    }
}

.section-info {
    padding: 10px;

    &:hover {
        background-color: #f9f9f9;
    }

    h4 {
        margin-bottom: 20px;
        text-decoration: underline;
        font-size: 20px;
        color: #555;
        line-height: 1.25;
    }

    p {
        margin-bottom: 18px;
        font-size: 15px;
        line-height: 1.6;
        color: #4c4c4c;
    }

    a {
        color: #e63946;

        &:hover {
            color: #4c4c4c;
        }
    }
}
</style>
